<template>
  <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#393D49"
        text-color="#fff"
        active-text-color="#409EFF"
        :unique-opened="true"
        :collapse="collapse"
        :collapse-transition="false"
        router
        :default-active="$route.path">
        
               <el-submenu v-for="(item,index) in menuList" :index="'/'+item.path" :key="item.id">
                 <template slot="title">
                   <i :class="icon[item.id]"></i>
                   <span>{{item.authName}}</span>
                 </template>
                 
           <el-menu-item v-for="(item2,index2) in item.children" :index="'/'+item2.path" :key="item2.id">
               <i class="el-icon-menu"></i>
           <span>{{item2.authName}}</span>
                </el-menu-item>
              </el-submenu>
              </el-menu>
</template>

<script>
  export default {
    props: {
      menuList: {
        type: Array,
        default(){
          return []
        }
      },
      collapse:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        icon:{
          125:"el-icon-user-solid",
          103:"el-icon-s-tools",
          101:"el-icon-s-goods",
          102:"el-icon-s-order",
          145:"el-icon-s-marketing"
        }
      }
    },
  }
</script>

<style scoped>
  .el-menu{
    border-right: none;
  }
</style>
